<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  </head>
  <body>
    <h2>原生jsonp测试</h2>
    <input type="text" id="username" />
    <label id="lab"></label>

    <hr />
    <h2>ajax jsonp 测试</h2>
    <button id="btn">点击获取数据</button>
    <div id="div"></div>
    <script>
      //执行此文件 使用右键->open in default browser
      //对于下面的http请求才是跨域
      /*
            //获取输入框
            let usertxt = document.getElementById("username");

            //声明handle函数
            function handle(data) {
              usertxt.style.border = "1px solid red";
              document.getElementById("lab").innerHTML = data.msg;
            }
            usertxt.onblur = function () {
              //获取用户输入的值
              let username = this.value;
              //向服务器发送请求，检测用户名是否存在

              let script = document.createElement("script");
              script.src = "http://127.0.0.1:9000/jsonp";
              document.body.appendChild(script);
            };
      */
      $("#btn").bind("click", function () {
        $.getJSON(
          "http://127.0.0.1:9000/jsonp_ajax?callback=?", //固定写法
          function (data) {
            $("#div").html(`name:${data.name}${data.city}`);
          }
        );
      });
    </script>
  </body>
</html>
